import React, { useEffect, useState } from 'react'
import Item from "./Item"
import PubSub from 'pubsub-js'

export default function List({ avatar_url, login, url }) {
  //初始化state 保存订阅回来的数据,当订阅更新后,视图重新渲染
  //怎么能用数据结构对象?????
  const [searchList, setSearchList] = useState({ isInit: true, isSearch: false, data: [] })
  //初始化订阅
  useEffect(() => {
    PubSub.subscribe("searchInfor", (_, data) => {
      // console.log(data);

      setSearchList(data.data.items)
    })
  }, [])


  return (
    <div className="row">
      {
        searchList.isInit ? <h2>请开始搜索</h2 > :
          searchList.isSearch ? <h2>正在搜索中....</h2> :
            searchList.map(item => {
              return <Item key={item.id} {...item} />
            })
      }
    </div>
  )
}
